<template>
  <PageWrapDrawer
:show="show" :isUpdate="props.isUpdate" :title="title" title-suffix="客户"
  ref="containerRef"
  @success="onSubmit"
  @on-drawer-close="onClose">
    <Form
name="basic"
          :model="insideData.data"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          layout="horizontal"
    >
    <Card hoverable :bordered="false" size="small">
      <template #title><h3 class="card-title">| 客户基础信息</h3></template>
        <Row>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="客户编码" name="code" v-bind="validateInfos['data.code']">
              <a-input v-model:value="insideData.data.code" :maxlength="8">
                <template #addonAfter>
                  <Tooltip title="生成编号">
                    <a @click="insideData.data.code = genCode()"><a><CodeOutlined /></a></a>
                  </Tooltip>
                </template>
              </a-input>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="客户名称" name="name" v-bind="validateInfos['data.name']">
              <a-input v-model:value="insideData.data.name"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="地址" name="address">
              <a-input v-model:value="insideData.data.address"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="电话" name="phone">
              <a-input v-model:value="insideData.data.phone"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="开户行" name="bank">
              <a-input v-model:value="insideData.data.bank"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="银行卡号" name="bankNumber">
              <a-input v-model:value="insideData.data.bankNumber"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="微信" name="weixin">
              <a-input v-model:value="insideData.data.weixin"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="QQ" name="qq">
              <a-input v-model:value="insideData.data.qq"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
            <FormItem label="启用" name="enasble">
              <RadioGroup v-model:value="insideData.data.enable">
                <Radio :value="1">启用</Radio>
                <Radio :value="2">禁用</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem
label="备注" name="memo" 
            :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
            :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
            >
              <a-textarea
v-model:value="insideData.data.memo" :autoSize="{ minRows: 2, maxRows: 6, }"
              placeholder="备注一下..."/>
            </FormItem>
          </Col>
        </Row>
      </Card>
    </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="DrawerOfCustomer" setup>
import { CodeOutlined } from '@ant-design/icons-vue';
import {
Card, Col,
Form, FormItem,
Radio, RadioGroup, Row,
Tooltip
} from 'ant-design-vue';
import { reactive, ref, toRaw, watch, watchPostEffect } from 'vue';
import { create, update } from '/@/api/wms/customer';
import { PageWrapDrawer } from '/@/components/PageWrapDrawer';
import { genCode } from "/@/utils/my";

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: {type: Boolean, default: null,},
    isUpdate: Boolean,
    isCopy: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const containerRef = ref()
const useForm = Form.useForm;
const insideData = reactive({
  data: {
    ID: null,
    code: '',
    name: '',
    address: '',
    phone: '',
    enable: 1,
    email: '',
    bank: '',
    bankNumber: '',
    telephone: '',
    weixin: '',
    qq: '',
    memo: '',
  }
});

const rulesRef = reactive({
  'data.code': [
    {required: true, message: '编码不能为空',},
  ],
  'data.name': [
    {required: true, message: '名称不能为空',},
  ] as unknown,
});

const title = ref('')
watchPostEffect(() => {
  if (props.show && props.isCopy) {
    title.value = '复制并创建 客户'
  }
})

const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
  },
});

watch(() => props.row, (v1, _) => {
  if (v1) {
    insideData.data = { ...v1 } as any
  }
}, {immediate: true,})

const onSubmit = () => {
  validate()
    .then(async () => {
      let params = toRaw(insideData.data)
      if (props.isUpdate) {
        await update(params).then(() => {
          onClose()
        })
      } else {
        await create(params).then(() => {
          onClose()
        })
      }
      emit('on-success')
    }).catch(err => {
    console.log('error-----', err);
  });
}

const onClose = () => {
  Object.assign(insideData, {data: {}})
  title.value = ''
  resetFields();
  emit('on-drawer-close');
};

</script>
<style scoped>
.card-title{
  /* opacity: .75; */
  color: #f90;
}
:deep().ant-card:not(:last-child){
  margin-bottom: 12px;
}
</style>
